﻿<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>人员权限分配</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="shortcut icon" href="../../../favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="../../../static/css/font.css">
    <link rel="stylesheet" href="../../../static/css/weadmin.css">
    <link rel="stylesheet" href="../../../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../../lib/layui/css/layui.css" media="all">
    <script type="text/javascript" src="../../../lib/layui/layui.js" charset="utf-8"></script>
    <script src="../../lib/layui_extends/layui-xtree.js"></script>
</head>
<body>
    <form class="layui-form">
        <div class="weadmin-nav">
            <span class="layui-breadcrumb" style="visibility: visible;">
                <a href="#">首页</a><span lay-separator="">/</span>
                <a href="#">基础设置</a><span lay-separator="">/</span>
                <a><cite>人员权限分配</cite></a>
            </span>
            <a class="layui-btn layui-btn-sm" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
                <i class="layui-icon" style="line-height:30px">ဂ</i>
            </a>
        </div>

        <div class="left-nav layui-container-left" style="display:none;">
            <div id="side-nav">
                <div class="layui-form">
                    <ul id="nav"></ul>
                </div>
            </div>
        </div>

        <div class="layui-row fluid-position" style="text-align:center;">
            <div class="layui-col-md3 row-1" id="selectDatas">
                <div class="layui-card">
                    <div class="layui-card-header layui-bg-gray">部门人员</div>
                    <div class="layui-card-body row-h-1 left">
                        <div id="eleTree" class="layui-tree" lay-filter="eledata" style="text-align:left;"></div>
                    </div>
                </div>
            </div>

            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header layui-bg-gray">权限按钮</div>
                    <div class="layui-card-body">
                        <div class="layui-card-body checkPerson"><span id="personName"></span></div>
                        <div class="layui-card-body checks" id="deptList">
                        </div>
                        <div class="layui-row">
                            <button type="button" class="layui-btn layui-btn-normal"  style="margin-left:110px;"  id="add"><i class="layui-icon">&#xe608;</i> 添加保存</button>
                        </div>
                    </div>
                </div>

            </div>
             
        </div>
    </form>
 
    <script>
        ///权限按钮 数据
        var dataLeft = [
            { value: 1, title: "添加" },
            { value: 2, title: "编辑" },
            { value: 3, title: "删除" },
            { value: 4, title: "审核" },
            { value: 5, title: "打印" },
            { value: 6, title: "导出" },
            { value: 7, title: "导入" },
        ];
        //加载 [赋值]获取数据  (选择树相关数据)  部门，用户 的树数据
        var dataSelect =[{ title: '部门1', id: '10', children: [{ title: '部门子级', id: '12' }, { title: '张三', id: '1' }] },
        { title: '部门2', id: '20', children: [{ title: '李四', id: '2' }] },
            { title: '部门3', id: '30', children: [{ title: '王五', id: '3' }, { title: '李六', id: '4' }, { title: '马七', id: '5' }] },
            { title: '部门4', id: '50', children: [{ title: '张9', id: '6' },{ title: '张先生', id: '7' }] }];
        var selectId = 0;//左侧选中 某用户的id
        var CheckboxIds = [];//右侧 按钮权限选择列表id   
        layui.use(['table', 'jquery','transfer', 'layer', 'form', 'tree', 'util'], function () {
            var table = layui.table,
                $ = layui.jquery,
                layer = layui.layer
                , form = layui.form;
            var eleTree = layui.tree;
            function getCheckBox()
            {
                $("#deptList").html("");
                for (var i = 0; i < dataLeft.length; i++) {
                    var item = dataLeft[i];
                    var eleHtml="";
                    if (CheckboxIds.indexOf(Number(item.value)) > -1) {
                        eleHtml = "<div class=\"layui-input-block\"><input type=\"checkbox\" name=\"dept\" value=\"" + item.value + "\" title=\"" + item.title + "\" lay-filter=\"deptradio\"  checked=\"checked\" /></div>";
                    }
                    else {
                        eleHtml = "<div class=\"layui-input-block\"><input type=\"checkbox\" name=\"dept\" value=\"" + item.value + "\" title=\"" + item.title + "\" lay-filter=\"deptradio\" /></div>";
                    }
                    $("#deptList").append(eleHtml);
                }
                form.render();
            }
            getCheckBox();          

            var el_tree;
            function reload() {
                el_tree = eleTree.render({
                    elem: '#eleTree',
                    id: 'eleTreeid',
                    data: dataSelect,
                    single: false,
                    defaultExpandAll: true,
                    expandOnClickNode: false,
                    highlightCurrent: true,
                    accordion:true
                    , checkStrictly: false
                    , showLine: true
                    , accordion: true
                    , click: function (obj) {
                        $("#personName").text(obj.data.title);
                        //layer.msg(JSON.stringify(obj.data));
                        if (obj.data.id == 99999) {
                            selectId = obj.data.title.split('_')[0];
                            getButtonPower(obj.data);
                        }
                        else {
                            selectId = 0;
                            layer.msg("请选择要设置的用户！");
                        }
                        if (obj.data.children == undefined) {
                            selectId = obj.data.id;
                            CheckboxIds = [Number(obj.data.id)];//赋值为：某用户拥有的权限按钮 id列表
                            getCheckBox();
                        }
                    }
                });
            }
            reload();
            form.on('checkbox(deptradio)', function (data) {
                if (data.elem.checked) {
                    CheckboxIds.push(Number(data.value));
                }
                else {
                    CheckboxIds.splice(CheckboxIds.indexOf(Number(data.value)),1);
                }
            });


            $.ajax({
                url: ApiUrl + "Dep/SelTreeDeptUser",
                type: 'post',
                headers: {
                    "userid": JSON.parse(window.localStorage.authInfo).UserId,
                    "signtoken": JSON.parse(window.localStorage.authInfo).SignToken,
                },
                success: function (data) {
                    if (data.StatusCode == 200) {
                        if (data.Data != "")
                            dataSelect = data.Data;
                        reload();
                    }
                    else if (data.StatusCode == 403) {
                    }
                    else {
                        //layer.msg(data.Info);
                    }
                }
            });
             
            //查询遍历所有按钮信息
            $.ajax({
                url: ApiUrl + "ModuleButton/Sel",
                type: 'POST',
                headers: {
                    "userid": JSON.parse(window.localStorage.getItem("authInfo")).UserId,
                    "signtoken": JSON.parse(window.localStorage.getItem("authInfo")).SignToken,
                },
                success: function (data) {
                    if (data.StatusCode == 200) {
                        if (data.Data == "") { }
                        else {
                            dataLeft.splice(0, dataLeft.length);
                            $(data.Data).each(function (index, item) {
                                dataLeft.push({ value: item.MBID, title: '' + item.MBName + '' });
                            });
                            console.log(dataLeft);
                        }
                        getCheckBox();
                        //form.render();
                    }
                    else if (data.StatusCode == 403) {
                        top.layer.alert(data.Info + ",请重新登录！", { closeBtn: 0 }, function () {
                            top.location.href = "http://" + top.location.host + "/login.html";
                        })
                    }
                    else {
                        layer.msg(data.Info);
                    }
                }
            });


            function getButtonPower(data) {
                $.ajax({
                    url: ApiUrl + "ModuleButtonSet/Sel",
                    type: 'get',
                    headers: {
                        "userid": JSON.parse(window.localStorage.getItem("authInfo")).UserId,
                        "signtoken": JSON.parse(window.localStorage.getItem("authInfo")).SignToken,
                    },
                    data: { UserID: selectId },
                    success: function (data) {
                        if (data.StatusCode == 200) {
                            CheckboxIds.splice(0, CheckboxIds.length);
                            if (data.Data == "") { }
                            else {
                                $(data.Data).each(function (index, item) {
                                    CheckboxIds.push(item.MBID);
                                });
                                console.log(dataLeft);
                            }
                            getCheckBox();
                            //form.render();
                        }
                        else if (data.StatusCode == 403) {
                            top.layer.alert(data.Info + ",请重新登录！", { closeBtn: 0 }, function () {
                                top.location.href = "http://" + top.location.host + "/login.html";
                            })
                        }
                        else {
                            layer.msg(data.Info);
                        }
                    }
                });
            }

            $("#add").click(function () {
                //alert("add");
                
                if (selectId == 0) {
                    layer.msg("请选择用户！");
                    return;
                }
                if (CheckboxIds.length == 0) {
                    layer.msg("请选择要设置权限按钮！");
                    return;
                }

                console.log(CheckboxIds);
                var tempList = [];
                for (var i = 0; i < CheckboxIds.length; i++) {
                    tempList.push({ UserID: selectId, MBID: CheckboxIds[i] });
                }
                $.ajax({
                    url: ApiUrl + 'ModuleButtonSet/Add',
                    type: 'POST',
                    data: { ButtonSetList: tempList },
                    headers: {
                        "userid": JSON.parse(window.localStorage.authInfo).UserId,
                        "signtoken": JSON.parse(window.localStorage.authInfo).SignToken,
                    },
                    success: function (data) {
                        if (data.StatusCode == 200) {
                            layer.msg("角色权限设置成功！");
                        }
                        else if (data.StatusCode == 403) {
                            top.layer.alert(data.Info + ",请重新登录！", { closeBtn: 0 }, function () {
                                top.location.href = "http://" + top.location.host + "/login.html";
                            })
                        }
                        else {
                            layer.msg(data.Info);
                        }
                    }
                });
            });

        });
    </script>
</body>
</html>
